package com.example.finalhomework.weather

import android.util.Log
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.lifecycle.viewmodel.compose.viewModel
import com.example.finalhomework.R

// WeatherScreen 组件，用于显示天气信息
@Composable
fun WeatherScreen(cityCode: String, weatherViewModel: WeatherViewModel = viewModel()) {
    // 通过 StateFlow 获取天气数据
    val weather by weatherViewModel.weather.collectAsState()

    // 当 cityCode 变化时，调用 fetchWeather 方法获取天气数据
    LaunchedEffect(cityCode) {
        Log.d("WeatherScreen", "Fetching weather for cityCode: $cityCode")
        weatherViewModel.fetchWeather(cityCode)
    }

    // 如果天气数据不为空，则显示天气信息
    weather?.let {
        Log.d("WeatherScreen", "Weather data received: $it")
        Column(modifier = Modifier.padding(16.dp)) {
            Row(modifier = Modifier
                .fillMaxWidth()
                .background(Color.White)
                .border(2.dp, Color.Black,shape = RoundedCornerShape(8.dp))
                .clip(RoundedCornerShape(8.dp))
                .padding(16.dp),
                horizontalArrangement = Arrangement.SpaceBetween
            ){
                // 获取第一天的天气预报
                val firstDay = it.data.forecast.first()
                // 根据天气类型设置图片资源
                val imageRes = when (firstDay.type) {
                    "晴" -> R.drawable.icons8_sunny_480
                    "阴" -> R.drawable.icons8_cloudy_512
                    "多云" -> R.drawable.icons8_mcloudy_480
                    "阵雨" -> R.drawable.icons8_thunder_480
                    "下雪" -> R.drawable.icons8_snow_512
                    "大雨" -> R.drawable.icons8_rain_512
                    else -> R.drawable.icons8_rain_512

                }
                // 显示天气图片
                Image(
                    painter = painterResource(id = imageRes),
                    contentDescription = null,
                    modifier = Modifier.size(160.dp) // 设置图片的宽度和高度
                        .padding(8.dp),
                    contentScale = ContentScale.Crop
                )

                // 显示城市和省份信息
                Column(modifier = Modifier
                    .padding(start = 16.dp),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.SpaceBetween
                ) {
                    //城市
                    Text(
                        text = it.cityInfo.city,
                        fontSize = 30.sp,
                        lineHeight = 40.sp,
                        textAlign = TextAlign.Center,
                        modifier = Modifier.fillMaxWidth().padding(top = 15.dp),
                    )
                    //省份
                    Text(
                        text = it.cityInfo.parent,
                        fontSize = 30.sp,
                        modifier = Modifier.padding(top = 21.dp),
                    )
                }

            }

            Spacer(modifier = Modifier.height(20.dp))

            // 显示湿度和温度信息
            Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.End) {
                Text(text = "湿度：" + it.data.shidu, fontSize = 20.sp, modifier = Modifier.padding(end = 8.dp))
                Spacer(modifier = Modifier.width(8.dp))
                Text(text = "温度：" + it.data.wendu +"℃", fontSize = 20.sp)
            }

            Spacer(modifier = Modifier.height(16.dp))

            // 使用 LazyColumn 显示天气预报列表
            LazyColumn (modifier = Modifier
                .background(Color.White)
                .border(2.dp, Color.Black,shape = RoundedCornerShape(8.dp))
                .clip(RoundedCornerShape(8.dp))
                .padding(16.dp),
            ){
                items(it.data.forecast) { forecast ->
                    Log.d("WeatherScreen", "Forecast item: $forecast")
                    Text(text = forecast.toString(),
                        fontSize = 18.sp, // Set the text size
                        modifier = Modifier
                            .fillMaxWidth()
                            .height(50.dp)
                            .padding(vertical = 8.dp))
                }
            }
        }
    } ?: run {
        Log.d("WeatherScreen", "Loading weather data...")
        Text(text = "Loading...")
    }
}

